{% extends 'base_monitor.html' %}


{% block content %}
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="page-header">
            <h3>服务监测</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">压力指示</h3>
                </div>
                <div id="usage-gauge" class="panel-body" style="margin-left: 37%"></div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">CPU</h3>
                </div>
                <div class="panel-body">

                    <div id="cpu-total-usage-chart"></div>
                    <h4 style="margin-left: 48%">CPU综合监测</h4>


                    <div id="cpu-per-core-usage-chart"></div>
                    <h4 style="margin-left: 48%">CPU单核心监测</h4>

                    <div id="cpu-usage-breakdown-chart"></div>
                    <h4 style="margin-left: 48%">CPU模式监测</h4>
                </div>
            </div>


            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">内存监测</h3>
                </div>
                <div class="panel-body">

                    <div id="memory-usage-chart"></div>
                    <h4 style="margin-left: 48%">内存总量监测</h4>
                    <br>
                    <div class="row col-sm-12">

                        <div class="col-sm-9">
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" id="progress-hot-memory">
                                    <span class="sr-only">Hot Memory</span>
                                </div>
                                <div class="progress-bar progress-bar-info" id="progress-cold-memory">
                                    <span class="sr-only">Cold Memory</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3" id="memory-text"></div>

                    </div>

                </div>
            </div>


            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">网络监测</h3>
                </div>
                <div class="panel-body">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="network-selection-dropdown"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span id="network-selection-text"></span>
                            <span class="caret"></span>
                        </button>
                        <ul id="network-selection" class="dropdown-menu" role="menu"
                            aria-labelledby="network-selection-dropdown">
                        </ul>
                    </div>
                </div>
                <div class="panel-body">

                    <div id="network-bytes-chart"></div>
                    <h4 style="margin-left: 48%">吞吐量监测</h4>
                </div>
                <div class="panel-body">

                    <div id="network-errors-chart"></div>
                    <h4 style="margin-left: 48%">错误监测</h4>
                </div>
            </div>


            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">文件系统监测</h3>
                </div>
                <div id="filesystem-usage" class="panel-body">
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">系统进程</h3>
                </div>
                <div id="processes-top" class="panel-body"></div>
            </div>

        </div>
    </div>


{% endblock %}

{% block style %}
    <link rel="stylesheet" href="/static/cadv/containers.css">
    <link rel="stylesheet" href="/static/cadv/googletable.css">

{% endblock %}

{% block script %}
    <script src="/static/cadv/jquery-1.js"></script>
    <script src="/static/cadv/bootstrap-3.js"></script>
    <!--<script type="text/javascript" src="/static/cadv/google-jsapi.js"></script> -->

    <script type="text/javascript" src="/static/cadv/containers.js"></script>
    <script type="text/javascript" src="/static/cadv/gcharts.js"></script>
    <script src="/static/cadv/googletable.js"></script>

    <script type="text/javascript">

        startPage("{{ rootDir }}", true, true, "../", true);
        drawImages(null);
    </script>

{% endblock %}